<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .con {
      width: 960px;
      border: 1px solid black;
      margin: 0 auto;
      background-color: #f2f2f2;
    }
    .address {
      list-style: none;
    }
    h1 {
      text-align: center;
    }
    .username1 {
      margin: 0 auto;
    }
  </style>
</head>
<body>
<div class="con">
 <h1>注册</h1>
<form id="register">
  <div>
    <div class="username ">
      <div class="username1 "></div>
      <label>用户名:<input type="text" name="username"></label>
    </div>
    <br> 未来意向：<br>
    <label><input type="radio" name="purp" value="1">Java工程师</label>
    <label><input type="radio" name="purp" value="2">测试工程师</label>
    <label><input type="radio" name="purp" value="3">前端工程师</label>
    <!-- 添加隐藏域 -->
    <input type="hidden" name="purpose">
    <br>
    <br> 请从以下课程中选择2项最喜欢的课程
    <ul class="address">
      <li>
        <label>
          <input type="checkbox" name="courses">Web开发技术
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox" name="courses">软件项目管理
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox" name="courses">数据库原理
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox" name="courses" >系统分析与设计
        </label>
      </li>
    </ul>
    地址：
    <ul id="ul_address" class="address">
    </ul>
    <label><input name="address"></label>
    <button type="button" id="button_address">添加地址</button>
    <br>
  </div>
  <button type="submit">提交</button>
</form>
  <label><input type="checkbox" id="legal">我已阅读相关说明并遵守相关法律</label>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(function () {
    let form = $("#register :input").prop("disabled", true);
    $("#legal").click(function () {
      let dis = !$(this).prop("checked");
      form.not($("button:submit")).prop("disabled", dis);
    });
    let name = false;
    $("input[name=username]").change(function () {
      if($(this).val() == null) {
        alert("输入的用户名为空！");
        name = false;
      }
      if($(this).val().trim().length < 6) {
        alert("输入的用户名小于六个字符！");
        name = false;
      }
      else {
        name =true;
      }
    });
    $("#button_address").click(() => {
      let va = $("input[name=address]");
      let item = $(`<li>${va.val()}</li>`);
      va.val("");
      item.css("display", "none");
      $("#ul_address").append(item);
      item.fadeIn(1000);
    });
    const endCount = 2;
    let clickCount = false;
    const count = $("input[name=courses]").click(function () {
      let click = count.filter(":checked");
      let unClick = count.not(":checked");
      clickCount = click.length === endCount;
      unClick.prop("disabled", clickCount);
    })
    let first = $("input[name=purp]");
    let second = $("input[name=purpose]");
    first.click(function () {
      if($(this).val() === second.val()) {
        second.val(0);
        $(this).prop("checked", false);
      }
      else {
        second.val($(this).val());
      }
    })
      $("input[name=username] ,input[name=courses]").change(function () {
      let end = name && clickCount;
      if(end === true) {
        $("button:submit").prop("disabled", !end);
      }
    //   $("input[name=courses]").change(function () {
    //     let end = name && clickCount;
    //     if(end === true) {
    //       $("button:submit").prop("disabled", !end);
    //     }
    // })
  })
  })
</script>
</body>
</html>